<template>
  <view>
    <u-popup :show="show" @close="close" @open="open"  >
      <view class="container_box">
        <view class="popup_header">
          <text>请选择支付方式</text>
          <u-icon
            name="close"
            color="black"
            size="20px"
            @click="close"
          ></u-icon>
        </view>
        <view class="popup_content">
          <u-cell-group :border="false">
            <u-radio-group
              :border="false"
              v-model="paymentType"
              placement="column"
            >
              <u-cell :border="false" title="微信支付" arrow-direction="down">
                <img slot="icon" src="@/static/icon/wx.png" alt="" />
                <u-radio slot="value" name="wx" />
              </u-cell>
              <u-cell :border="false" title="钱包支付" v-if="!isWallet">
                <img slot="icon" src="@/static/icon/ye.png" alt="" />
                <u-radio slot="value" name="wallet" />
              </u-cell>
            </u-radio-group>
          </u-cell-group>
        </view>

        <!-- <view class="is_ready_box">
          <u-radio-group :border="false" v-model="isReady">
            <u-radio name="isReady">
              <view class="text_group">
                <text>已阅读并同意</text>
                <text class="text_blue">《用户服务协议》</text>
              </view>
            </u-radio>
          </u-radio-group>
        </view> -->

        <view class="popup_footer" @click="pay()"> 支付 </view>
      </view>
    </u-popup>
    <!-- <u-button @click="show = true">打开</u-button> -->
  </view>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      paymentType: "wx",
      isReady: false,
    };
  },
  props: {
    // 是否充值到钱包
    isWallet: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    open() {
      // console.log('open');
    },
    close() {
      this.show = false;
      // console.log('close');
    },
    pay() {
      this.$emit("pay", {
        paymentType: this.paymentType,
        isReady: this.isReady,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container_box {
  padding: 42.614rpx 42.614rpx 54.545rpx 42.614rpx;
  background: rgba(255, 255, 255, 1);

  .popup_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .popup_content {
    margin-top: 42.614rpx;
    img {
      width: 51.136rpx;
      height: 51.136rpx;
    }
  }
}

.is_ready_box {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-left: 85.227rpx;
  margin-top: 20.455rpx;
}
.text_group {
  font-family: "Microsoft YaHei";
  font-size: 22.159rpx;
  font-weight: 400;
  line-height: 29.25rpx;
  text-align: left;

  .text_blue {
    color: rgba(0, 115, 255, 1);
  }
}

.popup_footer {
  margin-top: 42.614rpx;
  width: 340.909rpx;
  height: 83.523rpx;
  //   top: 216px;
  //   left: 120px;
  margin-left: 161.932rpx;
  border-radius: 34.091rpx;
  background: rgba(32, 132, 255, 1);
  color: rgba(255, 255, 255, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 34.091rpx;
}
</style>
